<!--
 * @Author: cqg
 * @Date: 2020-11-10 14:56:45
 * @LastEditors: cqg
 * @LastEditTime: 2020-12-15 17:32:50
 * @Description: file content
-->
<template>
  <div class="card-box">
    <v-dialog :show.sync="dialogVisible" width="70%" title="退租" ref="dialogBack">
      <div v-if="dialogVisible">
        <div class="card-box">
          <div class="card-title">合同信息</div>
          <el-form ref="form0" class="form-wrap" size="small">
            <el-form-item label="合同编码">
              <el-input v-model="contract.contractCode" disabled></el-input>
            </el-form-item>
            <el-form-item label="客户名称">
              <el-input v-model="contract.customerName" disabled></el-input>
            </el-form-item>
            <el-form-item label="物业名称">
              <el-input v-model="contract.propertyNames" disabled></el-input>
            </el-form-item>
            <el-form-item label="签定日期">
              <el-date-picker v-model="contract.signDate" type="date" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
            </el-form-item>
          </el-form>
          <div class="card-title">退租信息</div>
          <el-form ref="form" class="form-wrap" size="small" :rules="rules" :model="formData">
            <el-form-item label="终止类型" prop="endType">
              <el-select v-model="formData.endType" placeholder="请选择">
                <el-option v-for="item in contractEndType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="退租日期" prop="backDate">
              <el-date-picker v-model="formData.backDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date"></el-date-picker>
            </el-form-item>
            <el-form-item label="退租人" prop="backPerson">
              <el-input v-model="formData.backPerson" maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="退租人证件号" prop="backCertificateNum">
              <el-input v-model="formData.backCertificateNum"></el-input>
            </el-form-item>
            <el-form-item label="是否已结清费用" prop="feeComplete">
              <el-checkbox v-model="formData.feeComplete">已结清所有费用</el-checkbox>
            </el-form-item>
            <el-form-item label="备注" style="width:300%;">
              <el-input v-model="formData.remarks" maxlength="100"></el-input>
            </el-form-item>
          </el-form>
          <div class="card-title">附件</div>
          <el-row :gutter="20">
            <el-col>
              <upload-media
                type="file"
                ref="myUpload"
                modelType="lessor-out-contract"
                :isShowFileList="true"
                :isView="false"
                @onSuccess="onSuccess"
                @onError="onError"
              ></upload-media>
            </el-col>
          </el-row>
        </div>
      </div>
      <div slot="foot">
        <el-button v-throttle="[back]">提交</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </v-dialog>
  </div>
</template>

<script src="./back.js"></script>
<style scoped lang="scss" scoped>
@include formWrap();
.el-row {
  padding: 5px;
}
</style>
